import React, {useEffect, useState} from 'react';
import './Main.css'
import {Layout, Spin} from 'antd';
import {Outlet, useLocation} from 'react-router-dom';
import {useAppSelector} from "@/store/hook";
import {close, start} from "@/utils/Loading";

//组件导入
import NavTop from "@/components/navigation/NavTop";
import NavLeft from "@/components/navigation/NavLeft";


const {Header, Content, Sider} = Layout;


const Main = () => {
    const userinfo = useAppSelector(state => state.user.userInfo)
    const location = useLocation();
    const [loading,setLoading]= useState(true)

    useEffect(() => {
        console.log(userinfo)
    })
    //监听路由变化，加载进度条，首先开启进度在关闭
    React.useState(start());
    useEffect(() => {
        close();
        return () => {start();}
    },[location]);

    return (
            <Layout className='main_box'>
                {/*头部*/}
                <Header className="header">
                    <NavTop/>
                </Header>
                <Layout>
                    {/*左侧菜单*/}
                    <Sider width={200} className="site-layout-background">
                        <NavLeft/>
                    </Sider>
                    {/*右侧主体*/}
                    <Layout style={{padding: '0 24px 24px'}}>
                        {/*内容*/}
                        <Content
                            className="site-layout-background"
                            style={{
                                margin: '16px 0',
                                minHeight: 280,
                            }}
                        >
                            <Outlet/>
                        </Content>
                    </Layout>
                </Layout>
            </Layout>

    )
}

export default Main;
